<template>
  <div v-loading="loading">
    <div class="filter-container">
      <label class="filter-label">审核类型：</label>
      <el-select v-model="checkType" placeholder="请选择审核类型">
        <el-option label="全部审核" value="0"></el-option>
        <el-option label="授信审核" value="1"></el-option>
        <el-option label="提款审核" value="2"></el-option>
        <el-option label="还款审核" value="3"></el-option>
      </el-select>
    </div>
    <el-table
      border fit highlight-current-row
      :data="checkList">
      <el-table-column type="index" :index="1"></el-table-column>
      <el-table-column v-for="(col, colIndex) in tableCols"
                       :key="col.prop"
                       :prop="col.prop"
                       :label="col.label"
                       :width="col.width">
        <template slot-scope="scope">
          <el-tag v-if="col.filter" type="info">{{col.filter(scope.row)}}</el-tag>
          <span v-else>{{scope.row[col.prop]}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="goView(scope.row)" type="text" icon="el-icon-view" size="small" title="查看"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import * as actionTypes from '../../../constants/action-types';
    export default {
        name: 'CheckList',
        data() {
            return {
              loading: false,
              checkType:'0',

              tableCols:[
                // 编号
                // 审核单号
                {prop:'appId', label:'审核单号'},
                // 类型
                {prop:'subId', label:'类型', filter(row){
                  let checkTypeList=[
                    '授信申请',
                    '提款申请',
                    '还款申请',
                    '延期申请',
                  ]

                  return checkTypeList[row.type];
                }},
                // 状态
                {prop:'status', label:'状态', filter(row){
                  let checkTypeStatus=[
                    5,  // 授信100W以下没有4->副总一步
                    4,
                    2,
                  ]
                  if(row.type>2) {
                    return '';
                  }

                  let sucStatus = checkTypeStatus[row.type];
                  if(sucStatus>row.status){
                    return '审核中';
                  }else if(sucStatus==row.status){
                    return '成功'
                  }else if((sucStatus+1) == row.status){
                    return '失败';
                  }

                  return '';
                }},
                // 备注
                {prop:'remarks', label:'备注'},
                // 申请时间
                {prop:'createDate', label:'申请时间'},
                // 更新时间
                {prop:'updateDate', label:'更新时间'},
                // 操作
              ]
            }
        },
      computed:{
        checkList(){
          return this.$store.state.checkList;
        }
      },
      created(){
        this.fetchData();
      },
      methods:{
        fetchData(){
          let me =this;
          me.loading=true;
          this.$store.dispatch(actionTypes.GET_CHECKLIST).then(()=>{
            me.loading=false
          }).catch(() => {
            me.loading=false
          })
        },
        goView(row){
            this.$emit('goView',row)
          }
      }
    }
</script>

<style lang="stylus" scoped>
  .filter-container
    display: flex
    align-items center
    margin-bottom 15px
    .filter-label
      width: 170px
      text-align: right
      margin-right: 10px
</style>
